<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作前端页面</title>
</head>
<body>
<div id="app">

    <div align="center">
        <h1 align="center">用户新增加</h1>
        <!--        v-model 的修饰符，一般用于控制数据同步的时机-->
        <!--        2、.trim 自动过滤输入内容最开始  -->
        <!--        和 最后的 空格，中间的会保留一个空格，多的会被过滤掉-->
        名称<input type="text" v-model.trim="addUser.name"/>
        年龄<input type="text" v-model.number="addUser.age"/>
        性别<input type="text" v-model.trim="addUser.sex"/>
    </div>

    <div align="center">
        <h1 align="center">用户新修改</h1>
        <!--        v-model 的修饰符，一般用于控制数据同步的时机-->
        <!--        2、.trim 自动过滤输入内容最开始  -->
        <!--        和 最后的 空格，中间的会保留一个空格，多的会被过滤掉-->
        <!--            disabled添加属性规则-->
        <!--        和 最后的 空格，中间的会保留一个空格，多的会被过滤掉-->
        <!--双向数据绑定-->
        编号<input type="text" v-model.trim="updateUser.id" disabled/>
        名称<input type="text" v-model.trim="updateUser.name"/>
        年龄<input type="text" v-model.number="updateUser.age"/>
        性别<input type="text" v-model.trim="updateUser.sex"/>
        <!--        当我们用户点击提交按钮时发起ajax请求-->
        <button @click="updateUserMe">提交</button>
    </div>

    <hr/>
    <!--    换行符-->
    <table id="tab2" border="1px" align="center" width="80%">
        <tr>
            <!--     colspan 跨列; 合并列; 合并单元格;-->
            <td colspan="5" align="center"><h1>用户列表</h1></td>
        </tr>
        <tr align="center">
            <!--               设置表格内容-->
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>操作</td>
        </tr>

        <!-- 指定标签循环输出 标签+数据
        在设置为中央对齐 使用循环输出在user类中引用
        使用的是userList内容-->

        <tr align="center" v-for="user in userList">
            <td v-text="user.id">t</td>
            <td v-text="user.sex"></td>
            <td v-text="user.name"></td>
            <td v-text="user.id"></td>

            <td>
                <!--为修改添加按钮添加点击事件传递当前对象-->
                <!-- 添加标签 按钮 循环打印-->
                <button @click="UpdateUsertBtn(user)">修改</button>


                <!--为当前user对象绑定点击事件-->
                <button @click="deleteUser(user)">删除</button>
                <!-- 创建点击事件deleteUser-->
            </td>
        </tr>
    </table>
</div>
<script src="../js/vue.js"></script>
<!-- 2.引入Axios.js -->
<script src="../js/axios.js"></script>

<script>
    axios.defaults.baseURL = "http://localhost:8088"
    const app = new Vue({
        el: "#app",
        data: {
            userList: [],
            name: '',
            age: 0,
            sex: '',
        },
        //定义一个数据的封装体
        updateUser: {
            id: '',
            name: '',
            age: 0,
            sex: '',
        },
        methods: {
            // get查询操作 使用的get方法
            async getUserList(){
                // getUserList调取后台数据 遍历循环
                let {data: end} = await axios.get("/vue/getUserList")
                this.userList = end
            },
            async addUser(){
                await axios.post("/vue/insertUser",this.addUser())
                this.userList()
            }

        }

    })

</script>
</body>
</html>